<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>商品列表</title>
		<link rel="stylesheet" href="http://www.xyshopping.com:8848/qianduan/resources/css/bootstrap.min.css" type="text/css" />
		<script src="http://www.xyshopping.com:8848/qianduan/resources/js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="http://www.xyshopping.com:8848/qianduan/resources/js/bootstrap.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="http://www.xyshopping.com:8848/qianduan/resources/js/jquery-heima-0.0.1.js"></script>
		<script type="text/javascript" src="http://www.xyshopping.com:8848/qianduan/resources/js/heima-include.js"></script>
		<script>
			$(function() {
				//准备两个参数：分类标识cid和页码pageNumber
				var cid = HM.getParameter("cid");
				//默认就是第一页
				var pageNumber = HM.getParameter("pageNumber") == null ? 1 : HM.getParameter("pageNumber");
				var params = "cid=" + cid + "&pageNumber=" + pageNumber;
				//发请求
				HM.ajax("/product?md=page", params, function(vo) {
					var pb = vo.data;
					var products = pb.data;

					for (p of products) {
						var div = "<div class=\"col-md-2\" style=\"text-align:center;height:200px;padding:10px 0px;\">\n" +
							"\t\t\t\t\t\t<a href=\"info.html?pid=" + p.pid + "\">\n" +
							"\t\t\t\t\t\t\t<img src=\"http://www.xyshopping.com:8848/qianduan/" + p.pimage +
							"\" width=\"130\" height=\"130\" style=\"display: inline-block;\">\n" +
							"\t\t\t\t\t\t</a>\n" +
							"\t\t\t\t\t\t<p><a href=\"info.html?pid=" + p.pid + "\" style='color:#666'>" + p.pname +
							"</a></p>\n" +
							"\t\t\t\t\t\t<p><font color=\"#E4393C\" style=\"font-size:16px\">&yen;" + p.shop_price + "</font></p>\n" +
							"\t\t\t\t\t</div>"
						$("#productlist").append(div);
					}

					//拼接下方的页码
					// for(var i = pb.start; i <= pb.end; i++){
					// 	var li ="<li><a href='#'>"+i+"</a></li>"
						
					// 	$(".pagination").append(li);
					// }
					
					//利用封装好的方法
					var li =HM.page(pb,"http://www.xyshopping.com:8848/qianduan/view/product/list.html?cid="+cid);
					$(".pagination").html(li);
				})
			})
		</script>

		<!-- 引入自定义css文件 style.css -->

		<style>
		</style>
	</head>

	<body>
		<div class="container-fluid">
			<div id="header" style="min-height: 130px;"></div>
			<div class="container">
				<div id="productlist" class="row" style="width:1210px;margin:0 auto;">


				</div>

				<!--分页 -->
				<div style="width:380px;margin:0 auto;margin-top:50px;">
					<ul class="pagination" style="text-align:center; margin-top:10px;">
						<!-- <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
						
						
						<li>
							<a href="#" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li> -->
					</ul>
				</div>
				<!-- 分页结束=======================        -->

				<!--
		       		商品浏览记录:
		        -->
				<div style="width:1210px;margin:0 auto; padding: 0 9px;border: 1px solid #ddd;border-top: 2px solid #999;height: 246px;">

					<h4 style="width: 50%;float: left;font: 14px/30px " 微软雅黑 ";">浏览记录</h4>
					<div style="width: 50%;float: right;text-align: right;"><a href="">more</a></div>
					<div style="clear: both;"></div>

					<div style="overflow: hidden;">

						<ul style="list-style: none;">
							<li style="width: 150px;height: 216;float: left;margin: 0 8px 0 0;padding: 0 18px 15px;text-align: center;"><img
								 src="http://www.xyshopping.com:8848/qianduan/resources/products/1/cs10001.jpg" width="130px" height="130px" /></li>
						</ul>

					</div>
				</div>
			</div>
			<div id="footer" style="min-height: 203px;"></div>
		</div>
	</body>

</html>
